<template>
<div>
    <!--如果buttonMove为true，则button的class为checked，为false时则无class,实现点击事件则加click-->
    <button class='sporty-switch' @click="toggle" :class="{'sporty-checked':value}" :disabled="disabled"><span></span></button>
</div>
</template>

<script lang="ts">
import {
    ref
} from 'vue'
export default {
    props: {
        value: Boolean,
        disabled: {
            type: Boolean,
            default: false,
        }
    },
    setup(props, context) {
        const disabled = props.disabled;
        console.log(disabled);
        // const buttonMove=ref(false);
        const toggle = () => {
            //buttonMove作为常量，若想改值则改value属性
            // buttonMove.value=!buttonMove.value;
            //监听input值，然后传的是prop参数值取反（实则传给$event）
            context.emit('update:value', !props.value);
        }
        //必须return才可使用
        return {
            toggle,
            disabled
        };
    }
}
</script>

<style lang="scss" scoped>
$h: 22px;
$h2: $h - 4px;

.sporty-switch {
    height: $h;
    width: $h*2;
    border: none;
    background: grey;
    border-radius: $h/2;
    position: relative;

    &:active {
        >span {
            width: $h2 + 4px;
        }
    }

    &:disabled {
        background: lightgrey
    }

    //outline: none;  //取消点击时生成的黑框 
    >span {
        position: absolute;
        top: 2px;
        //将span移到button的右边界处，因为是用transition实现动画效果，则要在一个属性下值改变，而不是变化成不同属性
        //left:calc(100%-#{$h2}-2px);              100%则刚好出界在100%处后的位置，-#{h2}即是减掉宽度，看下面的指代参数
        left: 2px;
        height: $h2;
        width: $h2;
        background: white;
        //实现动画效果left属性，250毫秒内实现
        transition: all 250ms;
        border-radius: $h2 / 2;
    }

    //当button的class为checked时触发的样式
    &.sporty-checked {
        background: #490d9a;

        >span {
            left: calc(100% - #{$h2} - 2px);
        }
    }

    &:focus {
        outline: none;
    }

    //当按钮被鼠标点击行动时触发的样式
    &.sporty-checked:active {
        >span {
            width: $h2 + 4px;
            margin-left: -4px;
        }
    }
}
</style>
